Windows Presentation Foundation

Spuštění animace

Pro spuštění animace v XAML je možné vytvořit spínač. Spínač je tak možné přiřadit například k tlačítku, které animaci spustí. Na Obrázku 3 je, zobrazeno jaké elementy jsou potřeba pro spuštění animace.

Obrázek 3 Uspořádání elementů pro spuštění animace [zdroj: vlastní]

Od třídy FrameworkElement získávají elementy Button a Textbox atribut Triggers. Ten slouží pro přidání spínače. Element EventTrigger spustí při určité události všechny akce v kolekci s názvem Actions. Storyboard není akcí přímo spustitelnou prostřednictvím spínače. Proto potřebuje pro své spuštění element BeginStoryboard. Do přímého obsahu tohoto elementu se pak umístí Storyboard. Ten následně spustí paralelně všechny animace, co obsahuje. BeginStoryboard nedovoluje nastavit čas spuštění animace.

Pro spuštění animace v určitý čas se používá atribut BeginTime. Ten dovoluje nastavit zpoždění oproti startu všech animací ve Storyboard. Element ParallelTimeline slouží, k seskupení více animací. Pro ně pak lze nastavit společný čas spuštění. Animace v ParallelTimeline jsou spuštěny paralelně s ostatními animacemi ve Storyboard.

<BeginStoryboard>
   <Storyboard>
       <ColorAnimation Storyboard.TargetName="vyplnObdelniku"
                       Storyboard.TargetProperty="Color"
                       BeginTime="0:0:1"
                       From="LimeGreen"
                       To="Orange"
                       Duration="0:0:8"
                       RepeatBehavior="Forever"/>

      <ParallelTimeline BeginTime="0:0:2">
            <DoubleAnimation Storyboard.TargetName="fontSizeTextbox"
                             Storyboard.TargetProperty="FontSize"
                             From="12"
                             To="5"
                             Duration="0:0:2"/>

            <DoubleAnimation Storyboard.TargetName="heightTextbox"
                             Storyboard.TargetProperty="Height"
                             From="23"
                             To="60"
                             Duration="0:0:2"/>
        </ParallelTimeline>
   </Storyboard>
</BeginStoryboard>